import type { TableColumn, FormField } from '@/components'
import { reactive } from 'vue'
import { getOptionsLabelFn } from '@/utils/methods'

const typeOptions = [
  {
    label: '市局机关',
    value: 1
  },
  {
    label: '直属单位',
    value: 2
  }
]

export const fields = reactive<FormField[]>([
  {
    key: 'roleName',
    label: '角色名称',
    tag: 'ElInput'
  },
  {
    key: 'type',
    label: '角色类型',
    tag: 'MSelect',
    attrs: {
      options: typeOptions
    }
  }
])

export const columns: TableColumn[] = [
  {
    key: 'roleName',
    label: '角色名称'
  },
  {
    key: 'type',
    label: '角色类型',
    customRender: getOptionsLabelFn(typeOptions)
  },
  // {
  //   key: 'dataScope',
  //   label: '数据权限',
  //   customRender: getOptionsLabelFn(dataScopeOptions, Number)
  // },
  // {
  //   key: 'menuIds',
  //   label: '功能权限',
  //   slot: true
  // },
  {
    key: 'roleSort',
    label: '排序'
  },
  {
    key: 'actions',
    label: '操作',
    slot: true,
    fixed: 'right'
  }
]

export const dialogFields = reactive<FormField[]>([
  {
    key: 'roleName',
    label: '角色名称',
    tag: 'ElInput',
    required: true
  },
  {
    key: 'type',
    label: '角色类型',
    tag: 'MSelect',
    required: true,
    attrs: {
      options: typeOptions
    }
  },
  {
    key: 'roleSort',
    label: '角色排序',
    tag: 'ElInputNumber',
    required: true,
    attrs: {
      min: 1
    }
  }
  // {
  //   key: 'roleKey',
  //   label: '权限字符',
  //   tag: 'ElInput',
  //   required: true
  // }
])

export const permDialogFields = reactive<FormField[]>([
  {
    key: 'menuIds',
    label: '功能权限',
    tag: 'MTreeSelect',
    required: true,
    placeholder: '请选择（可多选）',
    attrs: {
      multiple: true,
      showCheckbox: true,
      fields: {
        value: 'id',
        label: 'label',
        children: 'children'
      },
      data: []
    }
  }
])
